import { Tabs } from 'antd-mobile'
import './style.css'
import {useTabs} from './useTabs.ts'
import HomeList from "@/pages/Home/HomeList";

const Home = () => {


    const  {channels} = useTabs()

    return (
        <div className="tabContainer">
            <Tabs defaultActiveKey={'0'}>
                {channels.map((item) => (
                    <Tabs.Tab title={item.name} key={item.id}>
                        <div className="listContainer">
                            <HomeList channelId={'' + item.id}/>
                        </div>
                    </Tabs.Tab>
                ))}
            </Tabs>
            {/*
        <Tabs>
         <Tabs.Tab title='水果' key='fruits'>
            菠萝
          </Tabs.Tab>
          <Tabs.Tab title='蔬菜' key='vegetables'>
            西红柿
          </Tabs.Tab>
          <Tabs.Tab title='动物' key='animals'>
            蚂蚁
          </Tabs.Tab>
        </Tabs>
       */
            }
        </div>
    )
}

export default Home